<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>生成器函数</title>
</head>

<body>

    <script>

        /*
            生成器函数
                - 生成器函数是ES6提供的一种异步编程解决方案
                - 语法：
                    function* 函数名() {
                        // 函数体
                }
                - 特点：
                    1. 生成器函数返回的是一个生成器对象
                    2. 生成器对象是一个遍历器对象，
                    3. 生成器对象中的next方法可以遍历生成器对象中的值
                - 应用：
                    1. 异步编程解决方案
                    2. 异步编程解决方案：
                        - 回调函数
                        - Promise对象
                        - async/await
                    3. 异步编程解决方案对比：
                        - 回调地狱
                            - 回调函数嵌套调用，外部回调函数异步执行的结果是嵌套的回调函数执行的条件
                        - Promise对象
                            - 链式调用
                            - 状态只能由pending到fulfilled或rejected，不能逆向
                            - 必须使用.then()
                        - async/await
                            - 语法简单，清晰
                            - 基于Promise，可以用于async函数中
                            - 自动执行异步操作
                            - 返回的是一个Promise对象

        */
        function* generatorFunction(resolve) {
            console.log(111, resolve);
            console.log(222, resolve);
            const one = yield 'aaa';
            console.log(333, one);
            console.log(333, one);
            const two = yield 'bbb';
            console.log(555, two);
            console.log(666, two);
            yield 'ccc';
            return;
        }

        // yidle 参数; 参数会作为generator.next()的返回值

        const generator = generatorFunction('第一次调用');
        console.log(generator.next());
        console.log(generator.next('第二次调用'));
        console.log(generator.next('第三次调用'));

    </script>

</body>

</html>